import React, { Component } from 'react'
import {connect} from 'react-redux'
import Scroll from 'react-bscroll'
import 'react-bscroll/lib/react-scroll.css'
import './css/index.css'
import store from '../store/store'

import Axios from 'axios'


 class Index extends Component {
     constructor(){
         super()
         store.subscribe( ()=>{

         } )
     }
     state={
         count:0
     }
     componentDidMount(){
        if(!this.props.list.length){
           this.props.getList()
        }
        this.scrollObj = this.refs.scroll.getScrollObj()
    }
     scrollgo=()=>{
         let sY=-this.scrollObj.y
         let num =Math.floor(sY/(105*8) ) 
         this.setState({
             count:num
         })
     }
    render() {
        let {list} =this.props
        return (
           <div className="index">
                <div className="left">
                    <ul>
                        {list.map( (item,index)=>{
                            return <li key={index} className={this.state.count===index?'active':''}  onClick={()=>{
                                this.scrollObj.scrollTo(0,-105*index*item.children.length,1000,'bounce')
                            }}> {item.name} 
                            <span>{item.scount}</span></li>
                        } )}
                    </ul>
                </div>
                <div className="right">
                        <Scroll ref='scroll' doScroll={this.scrollgo}>
                            {list.map((item,index)=>{
                               return item.children.map( (it,i)=><p key={i}> 
                                   <img src={it.image} alt=""/>
                               {it.title}
                               <span style={{color:'red',fontSize:'20px',marginRight:'5px'}}>￥{it.price}</span> 
                               <span>
                                    <button onClick={()=>{
                                        store.dispatch({type:'DEL',index:index,i:i})
                                        store.dispatch({type:'SCOUNT',index:index})
                                        store.dispatch({type:'ACOUNT'})
                                    store.dispatch({type:'AP'})
                                }} className={it.count===0?'none':''}>-</button > 
                                    {it.count} 
                               <button onClick={()=>{
                                   store.dispatch({type:'ADD',index:index,i:i,item:it})
                                   store.dispatch({type:'SCOUNT',index:index})
                                   store.dispatch({type:'ACOUNT'})
                                    store.dispatch({type:'AP'})
                                }
                                }>+</button> </span></p> )
                            })
                            }
                        </Scroll>
                        <div className="bt">
                            {
                                this.props.newList.map( (it,index)=>{
                                    return <p key={index}> 
                                    <img src={it.image} alt=""/>
                                {it.title}
                                <span style={{color:'red',fontSize:'20px',marginRight:'5px'}}>￥{it.price}</span> 
                                <span>
                                     <button onClick={()=>{
                                         store.dispatch({type:'DEL1',index:index})
                                         store.dispatch({type:'ACOUNT'})
                                    store.dispatch({type:'AP'})
                                 }} >-</button > 
                                     {it.count} 
                                <button onClick={()=>{
                                    store.dispatch({type:'ADD1',index:index})
                                    store.dispatch({type:'ACOUNT'})
                                    store.dispatch({type:'AP'})
                                 }
                                 }>+</button> </span></p>
                                } )
                                
                            }
                            <p>  总数量{this.props.allc} </p>
                            <p>  总价格{this.props.allp} </p>
                        </div>
                </div>
           </div>
        )
    }
}

let mapState=(state)=>({
    ...state
})
let mapAcion=( (dispatch)=>{
    return {
        add(index,i){
            dispatch({type:'ADD',index:index,i:i})
        },
        getList(){
            dispatch( (next)=>{
                Axios.get('/getList').then(res=>{
                    next({type:'GET',data:res.data.list})
                })
            } )

        }

    }
} )
export default connect(mapState,mapAcion)(Index)
